<template>
  <div class="dy-main AccountAddCardVerifi">
    <div class="dy-header">
      <x-header title="添加卡片" :left-options="{preventGoBack:true}" @on-click-back="back"></x-header>
    </div>
    <div class="dy-body">
      <div class="success-box-wrap" v-if="status === '1'">
        <img src="../../../static/icon/success-arrow.svg" />
        <strong>注册成功</strong>
        <p class="success-p">您已完成注册，需要添加卡号才可以<br />在手机银行进行交易！</p>
      </div>
      <group gutter="0.2rem">
        <x-input title="银行卡号" placeholder="请输入银行卡号" mask="9999 9999 9999 9999 9999" v-model="cardNo" label-width="2.05rem" class="cell" :min="1" :max="23">
          <div class="img-camera-wrap" slot="right">
            <img @click="scanBankCard()" class="imgCamera" src="../../../static/icon/scan.svg" />
          </div>
        </x-input>
      </group>
      <div class="confirm">
        <x-button :disabled="allowClick" action-type="button" @click.native="goNext">下一步</x-button>
      </div>
      <toast v-model="showPositionValue" type="text" width="6rem" :time="800" is-show-mask :text="errormsg" position="middle">{{ errormsg }}</toast>
    </div>
    <!--<div class="dy-footer"></div>-->
  </div>
</template>
<script>
export default {
  data () {
    return {
      status: null, // 接收入口参数：0表示去除头部注册成功部分
      errormsg: '', // 错误提示
      showPositionValue: false, // 提示开关
      cardNo: ''
    }
  },
  computed: {
    allowClick () {
      return this.cardNo.length < 18
    }
  },
  methods: {
    /**
     *返回
     *
     **/
    back () {
      if (this.status === '1') {
        this.$publicFun.goBack(this, 'AccountManage')
      } else {
        this.$publicFun.goBack(this)
      }
    },
    /**
     *跳转页面
     **/
    goNext () {
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'mstep.do?act=business',
          'params': {'method_Name': 'queryCardType', 'basic_Data': JSON.stringify({ 'cardNo': this.$publicFun.trimStr(this.cardNo) })}
        }), (response) => {
          let respData = JSON.parse(response).data
          console.log(respData)
          if (respData.head.respCode === '000000') { // 返回000000为正常，否则输出错误
            let cardKind = respData.body.cardKind
            let cardName = respData.body.cardName
            console.log(cardName)
            this.$router.push({name: 'AccountAddCard', query: {'cardNo': this.$publicFun.trimStr(this.cardNo), 'cardKind': cardKind, 'cardName': cardName}})
          } else { // 调用原生提示，输出错误内容
            this.$bridge.callhandler('showErrorHUD', {
              'type': 'toast',
              'errorMess': respData.head.respMsg
            })
          }
        })
    },
    /*
    *  类型：辅助
    *  扫描
    */
    scanBankCard () {
      this.$bridge.callhandler('scanBankCard', null,
        (response) => {
          response = JSON.parse(response)
          console.log(response)
          if (response.status === 0 || response.status === '0') {
            let returnData = response.result
            this.cardNo = returnData.cardNumber
          } else {
            console.log('fail')
          }
        })
    }
    // /*
    // *  类型：辅助
    // *  根据cardKind卡类型转换中文卡类别名称
    // */
    // cardKindChangeTxt (val) {
    //   switch (val) {
    //     case '100':
    //       return '活期账户'
    //     case '300':
    //       return '定期账户'
    //     case '400':
    //       return '往来账户'
    //     case '668':
    //       return '优慧理财'
    //     case '666':
    //       return '普通AIO'
    //     case '777':
    //       return '两地一本通'
    //     case '778':
    //       return '定活一本通'
    //     case '888':
    //       return '显卓理财'
    //     case '999':
    //       return '私人银行卡'
    //   }
    // }
  },
  created () {
    this.status = this.$route.query.status
  }
}
</script>
<style lang="less">
  .AccountAddCardVerifi {
    .dy-body {
      position: relative;
      overflow: auto;
      .success-box-wrap {
        padding: .58rem 0 .24rem;
        text-align: center;
        background-color: #fff;
        img {
          width: 1.5rem;
          height: 1.5rem;
        }
        strong {
          display: block;
          margin-top: .3rem;
          font-size: .44rem;
          font-weight: normal;
          line-height: .6rem;
        }
        .success-p {
          margin-top: .28rem;
          font-size: .24rem;
          line-height: .42rem;
          color: #9b9b9b;
        }
      }
      .confirm {
        margin: .8rem auto .62rem;
        padding: 0 .4rem;
        width: 100%;
      }
      /*.confirm {*/
        /*position: absolute;*/
        /*left: 0;*/
        /*bottom: .8rem;*/
        /*padding: 0 .4rem;*/
        /*width: 100%;*/
      /*}*/
    }
    .img-camera-wrap {
      display: inline-block;
      width:.48rem;
      height: .38rem;
      vertical-align: middle;
    }
  }
</style>
